<template>
  <!-- 空白处右键菜单 -->
  <div class="blank-rightmenu">
    <a-popconfirm @confirm="handleUpload">
      <a-icon slot="icon" type="upload" style="color: #999" />
      <input slot="title" type="file" @change="handleFileChange" />
      <!-- <a-button>选择文件</a-button> -->

      <div
        :class="{ 'menu-item': true, 'menu-item-disabled': folderId == -1 }"
        @click.stop="() => {}"
      >
        上传文件
      </div>
    </a-popconfirm>
    <a-popconfirm @confirm="handleCreateFolder">
      <a-icon slot="icon" type="folder-add" style="color: #999" />
      <a-input slot="title" v-model="folderName" size="small"></a-input>
      <div class="menu-item" @click.stop="() => {}">新建文件夹</div>
    </a-popconfirm>
    <div
      :class="{
        'menu-item': true,
        'menu-item-disabled':
          folderId == -1 ||
          (clipBoard.type != 'copy' && clipBoard.type != 'cut')
      }"
      @click.stop="handleStick"
    >
      粘贴
    </div>
    <div class="menu-item" @click="handleRefresh">刷新</div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: {
    folderId: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      // 新建文件夹名称
      folderName: 'new folder',
      // 选择的文件
      selectFile: ''
    }
  },
  computed: {
    ...mapState(['clipBoard'])
  },
  methods: {
    // 文件选择改变
    handleFileChange(e) {
      this.selectFile = e.target.files[0]
    },
    handleUpload() {
      if (this.selectFile !== '') {
        this.$emit('upload', this.folderId, this.selectFile)
      }
    },
    handleCreateFolder() {
      if (this.folderName.trim() === '') {
        this.folderName = 'new folder'
      }
      this.$emit('create', this.folderName)
    },
    handleStick() {
      if (this.folderId === -1) return
      const that = this
      if (this.clipBoard.type === 'copy') {
        // 复制到当前
        this.$api.files
          .copyFile(this.folderId, this.clipBoard.fileId)
          .then((res) => {
            this.$store.commit('setClipBoard', { type: 'no' })
            this.$emit('sticked')
          })
      } else if (this.clipBoard.type === 'cut') {
        // 移动到当前
        this.$api.files
          .moveFile(
            this.clipBoard.parentId,
            this.folderId,
            this.clipBoard.fileId
          )
          .then((res) => {
            this.$store.commit('setClipBoard', { type: 'no' })
            console.log('ennn')
            // console.log(this.$abc)
            that.$emit('sticked')
          })
      }
    },
    handleRefresh() {
      this.$emit('refresh')
    }
  }
}
</script>
<style lang="less" scoped>
.blank-rightmenu {
  .menu-item {
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-bottom: 1px dotted #ccc;
    transition: background 0.5s;
    user-select: none;
    &:hover {
      background-color: fade(@primary-color, 10%);
    }
  }
  .menu-item-disabled {
    pointer-events: none;
    color: #ccc;
    &:hover {
      background: none;
    }
  }
}
</style>
